<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>哔哩哔哩</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	</head>
	<body data-spy="scroll" data-offset="1" data-target="#navigation">
		<nav class="navbar-default" id="navigation">
			<header class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="btn">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<img src="img/logo2.svg" style="width: 80px;padding-top: 5px;">
				</div>
				<div class="navbar-collapse collapse" id="nav">
					<ul class="nav navbar-nav navbar-top">
						<li><a href="#">主站</a></li>
						<li class="visible-lg"><a href="#">番剧</a></li>
						<li><a href="#">会员购</a></li>
						<li class="visible-lg"><a href="#">漫画</a></li>
						<li><a href="#">动态</a></li>
						<li class="visible-lg" data-placement="bottom" id="app"><a href="#"><img src="img/iphon.svg">下载APP</a></li>
						<li class="visible-lg">
							<form style="margin-top: 10px;" class="form-inline">
								<div class="form-group">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="B站热门2020全年总结">
										<div class="input-group-addon "><img src="img/search.svg"></div>
									</div>
								</div>
							</form>
						</li>
						<li class="visible-lg"><a href="#"><img src="img/head1.svg" style="margin-top: -10px;" id="head"></a></li>
						<li><a href="#">动漫</a></li>
						<li><a href="#">大会员</a></li>
						<li class="visible-lg"><a href="#">动态</a></li>
						<li><a href="#">历史浏览</a></li>
						<li class="visible-xs"><a href="#">个人中心</a></li>
						<li><input type="button" class="alert-danger form-control" value="投稿" style="margin-top: 10px;width: 120px;" /></li>
						<li class="visible-xs"><input type="button" class="alert-info form-control" value="退出" style="margin-top: 10px;width: 120px;" /></li>
					</ul>
				</div>
			</header>
		</nav>
		<section class="container" id="two">
			<div class="row">
				<div class="col-xs-4" style="padding-top: 10px;">
					<ul class="list-inline" style="float: left;">
						<li><img src="img/icon1.png">
							<p>&nbsp;首页</p>
						</li>
						<li><img src="img/icon2.png">
							<p>&nbsp;动态</p>
						</li>
					</ul>
					<ul class="list-inline visible-lg visible-md visible-sm" style="float: left;">
						<li><img src="img/icon3.png">
							<p>&nbsp;热门</p>
						</li>
						<li><img src="img/icon4.png">
							<p>&nbsp;频道</p>
						</li>
					</ul>
					<ul class="list-inline visible-lg">
						<li style="padding-left: 9px;">&nbsp;</li>
						<li>
							<p>动画<i>999+</i></p>
							<p>番剧<i>143+</i></p>
						</li>
						<li style="border-right:1px solid #efefef;">
							<p>音乐<i>999+</i></p>
							<p>国创<i>514 &nbsp;</i></p>
						</li>
					</ul>
				</div>
				<div class="col-lg-5" style="padding-top: 10px;">
					<ul class="list-inline visible-lg visible-md" style="float: left;">
						<li>
							<p>舞蹈<i>999+</i></p>
							<p>游戏<i>999+</i></p>
						</li>
						<li>
							<p>知识<i>999+</i></p>
							<p>数码<i>999+</i> </p>
						</li>
					</ul>
					<ul class="list-inline " style="float: left;">
						<li>
							<p>生活<i>999+</i></p>
							<p>鬼畜<i>171 &nbsp;</i></p>
						</li>
					</ul>
					<ul class="list-inline" style="float: left;">
						<li>
							<p>时尚<i>999+</i></p>
							<p>资讯<i>830 &nbsp;</i></p>
						</li>
					</ul>
					<ul class="list-inline" style="float: left;">
						<li>
							<p>娱乐<i>999+ </i></p>
							<p>影视<i>&nbsp;37 &nbsp;&nbsp;</i></p>
						</li>
					</ul>
					<ul class="list-inline" style="float: left;">
						<li>
							<p>放映厅<i>178&nbsp;</i></p>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>更多</span><span class="caret"></span></a>
						</li>
					</ul>
					<ul class="list-inline visible-lg" style="border-right: solid 1px #efefef;">
						<li>
							<p>&nbsp;</p>
							<p>&nbsp;</p>
						</li>
					</ul>
				</div>
				<div class=" visible-lg col-md-3" style="padding-top: 10px;padding-left: 30px;">
					<ul class="list-inline ">
						<li><img src="img/icon6.png">
							<span>专栏</span>
						</li>
						<li><img src="img/qz.svg">
							<span>活动</span>
						</li>
						<li><img src="img/tp.svg">
							<span>小黑屋</span>
						</li>
					</ul>
					<ul class="list-inline ">
						<li><img src="img/sxj1.svg">
							<span>直播</span>
						</li>
						<li><img src="img/kt.svg">
							<span>课堂</span>
						</li>
						<li><img src="img/yy.svg">
							<span>音乐PLUS</span>
						</li>
					</ul>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<div class="carousel slide" id="slidershow2" data-ride="carousel" data-interval="3000">
							<ol class="carousel-indicators">
								<li data-target="#slidershow2" data-slide-to="0" class="active"></li>
								<li data-target="#slidershow2" data-slide-to="1"></li>
								<li data-target="#slidershow2" data-slide-to="2"></li>
								<li data-target="#slidershow2" data-slide-to="3"></li>
								<li data-target="#slidershow2" data-slide-to="4"></li>
							</ol>
							<div class="carousel-inner" id="img1">
								<div class="item active"><img src="img/img1.jpg" /></div>
								<div class="item"><img src="img/img2.jpg" /></div>
								<div class="item"><img src="img/img3.jpg"></div>
								<div class="item"><img src="img/img4.jpg"></div>
								<div class="item"><img src="img/img5.jpg"></div>
								<a href="#slidershow2" data-slide="prev" class="right carousel-control" role="button"></a>
								<a href="#slidershow2" data-slide="next" class="left carousel-control" role="button"></a>
							</div>
						</div>
					</div>
					<div class="one_2 col-lg-6 visible-lg">
						<div class="col-md-4" id="one_1">
							<img src="img/img6.jpg" style="border-radius: 1px;"><span class="txt3">【明日方舟】</span>
							<div class="info">
								<p class="title">【初音ミク】39 TECHN【八王子P】</p>
								<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;</p>
								<p class="play">播放：48243</p>
							</div>
						</div>
						<div class="col-md-4" id="one_2">
							<img src="img/img7.jpg" style="border-radius: 1px;"><span class="txt3">【咒术回战 手书】</span>
							<div class="info">
								<p class="title">【咒术回战 手书】【七海建人中心】准时下班</p>
								<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;LKs-b</p>
								<p class="play">播放：4.2万</p>
							</div>
						</div>
						<div class="col-md-4" id="one_3">
							<img src="img/a.jpg" style="border-radius: 1px;"><span class="txt3">【何同学这视频能...】</span>
							<div class="info">
								<p class="title">【何同学能让你戒掉手机】</p>
								<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;老师好我叫何同学</p>
								<p class="play">播放：9.4万</p>
							</div>
						</div>
						<div class="col-md-12"><span> &nbsp </span></div>
						<div class="col-md-4" id="one_4">
							<img src="img/img9.jpg" style="border-radius: 1px;"><span class="txt3">【元神】这才是我想要的...</span>
							<div class="info">
								<p class="title">【元神】这才是我想要的元神世界(蒙德篇)</p>
								<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;大家闺秀王钢蛋</p>
								<p class="play">播放：4.32万</p>
							</div>
						</div>
						<div class="col-md-4" id="one_5">
							<img src="img/img10.jpg" style="border-radius: 1px;"><span class="txt3">【鹿乃】<<装甲娘站...</span> <div class="info">
									<p class="title">【鹿乃】用仙剑的方式打开元神</p>
									<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;憨大梗</p>
									<p class="play">播放：5.7万</p>
						</div>
					</div>
					<div class="col-md-4" id="one_6">
						<img src="img/img11.jpg" style="border-radius: 1px;"><span class="txt3">【你这么老，知道什么...】</span>
						<div class="info">
							<p class="title">【你这么老，知道什么是二次元吗？】</p>
							<p class="author"><i style="background-color: transparent;border: 1px solid #f3f3f3;">up</i>&nbsp;音乐鱼</p>
							<p class="play">播放：48243</p>
						</div>
					</div>
				</div>
			</div>
			</div>
		</section>
		<section class="container" id="three">
			<div class="row">
				<div class="col-lg-12">
					<ul class="list-inline">
						<li><img src="img/lb.svg"></li>
						<li><span>
								<h4><strong>推广</strong></h4>
							</span>
						</li>
						<li><span><img src="img/huo.svg"> B站年度报告来啦！ </span></li>
						<li class="navbar-right"><input type="button" value="在线列表" class="form-control" id="zx" /></li>
					</ul>
				</div>
				<div class="col-lg-8 " id="img3">
					<div class="col-lg-3 col-sm-6 col-xs-6"><img src="img/img12.jpg">
						<span class="badge">广告</span>
						<span>喝元气森林 赢元气新年</span>
					</div>
					<div class="col-lg-3 col-sm-6 col-xs-6"><img src="img/img22.jpg">
						<span class="badge">广告</span>
						<span>每天学影视半小时，挑战兴趣养活自己</span></div>
					<div class="col-lg-3 col-sm-6 col-xs-6"><img src="img/e.jpg">
						<span class="badge">广告</span>
						<span>只要30天就搞定Java知识点</span></div>
					<div class="col-lg-3 col-sm-6 col-xs-6"><img src="img/f.jpg">
						<span class="badge">广告</span>
						<span>两个大学生如何用swag引爆社团考核现场</span>
					</div>
				</div>
				<div class="col-lg-4 visible-lg" id="img5">
					<img src="img/img24.jpg">
				</div>
			</div>
		</section>

		<section class="container" id="five">
			<div class="row">
				<div class="col-lg-12">
					<ul class="list-inline" style="float: left;">
						<li><img src="img/sxj.svg"></li>
						<li><span>
								<h4><strong>正在直播</strong></h4>
							</span>
						</li>
						<li><span>当前有17919个在线直播 </span></li>
						<li class="navbar-right" style="padding-top: 10px;">为您推荐</li>
						<li class="navbar-right visible-lg" style="padding-top: 10px;">关注的主播</li>
					</ul>
					<ul class="list-inline visible-lg visible-md">
						<li class="navbar-right" style="padding-top: 10px;">直播排行</li>
						<li class="navbar-right"><input type="button" value="更多" class="form-control" /></li>
						<li class="navbar-right"><input type="button" value="换一批" class="form-control" /></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-8" id="img4">
					<div class="col-lg-3 col-sm-6 col-xs-6">
						<div>
							<img src="img/img16.jpg">
							<p><span>火锅大师csgo锦标赛</span></p>
						</div>
						<div>&nbsp;</div>
						<div>
							<img src="img/img17.jpg">
							<p><span>工具人的幸福生活(01)</span></p>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6 col-xs-6">
						<div>
							<img src="img/img18.jpg">
							<p><span>国服雷神，细节大观</span></p>
						</div>
						<div>&nbsp;</div>
						<div>
							<img src="img/img19.jpg">
							<p><span>这就是大人的世界吗!?</span></p>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6 col-xs-6">
						<div>
							<img src="img/img20.jpg">
							<p><span>樱桃小丸子想要烫头发</span></p>
						</div>
						<div>&nbsp;</div>
						<div>
							<img src="img/img21.jpg">
							<p><span>黑桐谷歌正在直播...</span></p>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6 col-xs-6">
						<div>
							<img src="img/d.jpg">
							<p><span>绵绵Makino【羊间】</span></p>
						</div>
						<div>&nbsp;</div>
						<div>
							<img src="img/b.jpg">
							<p><span>bilibili王者冬季冠军杯</span></p>
						</div>
					</div>
				</div>

				<div class="col-lg-4 visible-lg">
					<div class="carousel slide" id="slidershow3" data-ride="carousel" data-interval="4000">
						<ol class="carousel-indicators">
							<li data-target="#slidershow3" data-slide-to="0" class="active"></li>
							<li data-target="#slidershow3" data-slide-to="1"></li>
							<li data-target="#slidershow3" data-slide-to="2"></li>
						</ol>
						<!--图片容器-->
						<div class="carousel-inner" id="img2">
							<div class="item active"><img src="img/img13.jpg" /></div>
							<div class="item"><img src="img/img14.jpg" /></div>
							<div class="item"><img src="img/img15.jpg"></div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<footer class="container" id="four">
			<div class="col-lg-4">
				<div class="list-inline" style=" float: left;">
					<h4>bilibili</h4>
					<h5>关于我们</h5>
					<h5>联系我们</h5>
					<h5>用户协议</h5>
					<h5>加入我们</h5>
				</div>
				<div class="list-inline" style="margin-left: 50px; float: left;">
					<h4>&nbsp;</h4>
					<h5>友情链接</h5>
					<h5>隐私政策</h5>
					<h5>bilibili认证</h5>
					<h5>Inverstor Relations</h5>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="list-inline" style="margin-left: 30px; float: left;">
					<h4>传送门</h4>
					<h5>协议汇总</h5>
					<h5>活动中心</h5>
					<h5>活动专题页</h5>
					<h5>侵权申诉</h5>
				</div>
				<div class="list-inline visible-lg " style="margin-left: 20px; float: left;">
					<h4>&nbsp;</h4>
					<h5>帮助中心</h5>
					<h5>用户反馈论坛</h5>
					<h5>壁纸站</h5>
					<h5>广告合作</h5>
				</div>
				<div class="list-inline visible-lg" style="margin-left: 20px; float: left;">
					<h4>&nbsp;</h4>
					<h5>名人堂</h5>
					<h5>MCN管理中心</h5>
					<h5>高级弹幕</h5>
					<h5>企业号官网</h5>
				</div>
				<div class="list-inline visible-xs">
					<img src="img/user_tv.gif">
				</div>
			</div>
			<div class="col-xs-4 visible-lg visible-md visible-sm">
				<ul class="list-inline" style="margin-top: 50px;">
					<li><img src="img/xz.svg" style="margin-left: 10px;">
						<p>下载APP</p>
					</li>
					<li><img src="img/wb.svg" style="margin-left: 10px;">
						<p>新浪微博</p>
					</li>
					<li><img src="img/wx.svg" style="margin-left: 10px;">
						<p>官方微信</p>
					</li>
					<li><img src="img/user_tv.gif" style="margin-left: 10px;height: 70px;">
					</li>
				</ul>
			</div>
		</footer>
		<div class="container-fluid">
			<div class="col-lg-12 visible-lg">
				<hr>
				<div class="col-lg-1">
					<img src="img/partner.png" width="100px">
					<br>
					<img src="img/pic962110.png" width="100px">
					<br>
					<img src="img/confirm.png" width="100px">
				</div>
				<div class="col-lg-10" style="margin-left: 20px;">
					<p style="line-height: 28px;color: #ADADAD;">营业执照 信息网络传播视听节目许可证：0910417 网络文化经营许可证 沪网文【2019】3804-274号
						广播电视节目制作经营许可证：（沪）字第01248号<br>
						增值电信业务经营许可证 沪B2-20100043互联网ICP备案：沪ICP备13002172号-3 出版物经营许可证 沪批字第U6699 号<br> 互联网药品信息服务资格证 沪-非经营性-2016-0143 营业性演出许可证
						沪市文演（经）00-2253<br />
						违法不良信息举报邮箱：help@bilibili.com |违法不良信息举报电话：4006262233转1<br />
						上海互联网举报中心 | 12318全国文化市场举报网站 |<img src="img/icpicon.png"> 沪公网安备31011002002436号 | 儿童色情信息举报专区 | 扫黄打非举报<br />
						网上有害信息举报专区：中国互联网违法和不良信息举报中心<br />
						亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。<br />
						公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888
					</p>
				</div>
			</div>
		</div>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
